<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Topic</title>
        <% include ../common/link%>
        <script type="text/javascript" charset="utf-8" src="/js/ueditor/ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="/js/ueditor/ueditor.all.js"></script>
        <script type="text/javascript" charset="utf-8" src="/js/ueditor/zh-cn.js"></script>
        <style>
            .btn_collect{
                float:right;
                padding:1px 10px;
                vertical-align: middle;
            }
            .pret{
                color:red
            }
        </style>
    </head>
    <body>
        <% include ../common/header%>
        <div class="container" style="margin-top:3%;margin-bottom:70px">
            <div class="col-md-9">
                <div class='header'>
                    <h2><small>[<%=topic.topicType.catename%>] </small>&nbsp;&nbsp;<%=topic.title%></h2>
                </div>`
                <div class='header' >
                    <h6 style="line-height:20px">
                        <small>Posted by <%=topic.poster.username%>, <%=countTimeAgo(topic.createTime)%> , <%=topic.viewCount%> views</small>
                        <%if(user){%>
                            <%if(user.collections.indexOf(topic._id+"") !== -1){%>
                                <input type="button" name="" value="★ Collected" class="btn btn_collect" onclick="collectOpt('cancel')">
                            <%}else{%>
                                <input type="button" name="" value="☆ Add to collections" class="btn btn-primary btn_collect" onclick="collectOpt('add')">
                            <%}%>
                        <%}%>
                    </h6>
                    <!--话题操作项, 最好登陆后在session中用户信息中放置用户等级信息-->
                    <%if(user && (user.level === 1 || user._id+"" === topic.poster._id+"")){%>
                        <a href="/topics/editTopic/<%=topic._id%>" class="btn btn-primary"><span class="glyphicon glyphicon-edit"></span> Edit</a>
                        <a href="" class="btn btn-primary"><span class="glyphicon glyphicon-trash"></span> Delete</a>
                    <%}%>
                    
                </div><hr>
                <div >
                    <!--
                    Ejs语法结构中
                        - 表示解析html
                        = 表示不解析html
                    -->
                    <%-topic.content%>
                </div>
                <!--话题回复列表-->
                <%if(topicRepliesList){%>
                    <div class='panel panel-default' style="margin-top:19px">
                        <div class="panel-heading">
                            <%=(topicRepliesList ? topicRepliesList.length : 0)%> replies.
                        </div>
                        <div class='list-group'>
                            <%topicRepliesList.forEach(function(reply,i){%>
                                <a class="list-group-item">
                                    <img src="<%=(reply.user.avatar? reply.user.avatar : '/images/avatar.png' )%>" style="width:30px;height:30px"/> 
                                    &nbsp;&nbsp;
                                    <%=reply.user.username%>&nbsp;&nbsp; stair #<%=reply.stair%> &nbsp;&nbsp; <%=countTimeAgo(reply.replyTime)%>
                                    <!--点赞-->
                                    <span style="float:right;
                                        <%if(user){%>
                                            <%=(reply.likes.indexOf(user._id+'')===-1?'':'color:red')%>
                                        <%}%>
                                    " class="glyphicon glyphicon-thumbs-up" onclick="pret('<%=reply._id%>',this)">
                                    <%=reply.likes.length%>
                                    </span>
                                    
                                    <p>
                                    <div class="reply_header">
                                        
                                    </div>
                                    <div class="reply_content">
                                        <%-reply.content%>
                                    </div>
                                </a>
                            <%})%>
                        </div>
                    </div>
                <%}%>
                <!--回复区域, 只有当当前用户登陆之后才显示回复框-->
                <div class='panel panel-default' style="margin-top:19px">
                    <div class="panel-heading">Reply this topic</div>
                    <div class='panel-body'>
                        <%if(user){%>
                            <form action="/topics/replyTopic" method="post" id="replyForm">
                                <input type="hidden" value="<%=topic._id%>" name="topicId"/>
                                <script id="editor" type="text/plain" style="width:100%;height:500px;" name="content"></script>
                                </p>
                                <input type="button" class="btn btn-primary" value="Reply" name="post">
                            </form>
                        <%}else{%>
                            You haven't logged in, please log in to reply this topic. 
                            <a href="/login" class="btn btn-primary">Login</a>
                        <%}%>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class='panel panel-default' style="margin-top:19px">
                    <div class="panel-heading">Posted by</div>
                    <div class='panel-body'>
                        <a class='user_avatar' href="/user/xdlnode">
                            <img src="<%= (topic.poster.avatar ? topic.poster.avatar : '/images/avatar.png') %>" style="width:60px;height:60px" title="his"/>
                        </a>
                         &nbsp;&nbsp;
                         <!--跳到查看用户信息界面-->
                        <a class='dark' href="/user/xdlnode"><%= topic.poster.username %></a>
                        </br></br>
                        <span class='big'>Score: <%= topic.poster.score %> </span>
                        </br></br>
                        <span class="signature">
                            “ <%= topic.poster.mark ? topic.poster.mark :'This guy is lazy and wrote nothing.' %> ”
                        </span>
                        </br></br></br>
                        <span class='big'>Author's other topics:</span>
                        </br></br>
                        <%hisTopics.forEach(function(tpc,i){%>
                            <a href='/topics/<%=tpc._id%>'><%=tpc.title%></a></p>
                        <%})%>
                        </br>
                        <span class='big'>Current topics without replies:</span>
                        </br></br>
                        <%noReplyData.forEach(function(tpc,i){%>
                            <a href='/topics/<%=tpc._id%>'><%=tpc.title%></a></p>
                        <%})%>
                    </div>
                </div>
            </div>
        </div>
        <% include ../common/footer%>
    </body>
    <script>
        var ue = UE.getEditor('editor');   
        $("input[name='post']").on("click",function(){
            $("#replyForm").submit();
        });

        function collectOpt(param){
            window.location.href = '/topics/collect/'+param+'?topic=<%=topic._id%>';
        }

        function pret(replyId,rpl){
            <%if(user){%>
                $.ajax({
                    url:'/topics/pretReply',
                    type:'post',
                    data:{replyId:replyId},
                    dataType:'text',
                    success:function(data){
                        if(data  !== "err"){
                            var msg = eval("("+data+")");
                            rpl.innerHTML = " "+msg.count;
                            if(msg.flag){
                                rpl.style.color = 'red';
                            }else{
                                rpl.style.color = 'black';
                            }
                        }
                        
                    },
                    error:function(err){
                    },
                });
            <%}else{%>
                alert("please log in");
            <%}%>
        }
    </script>
</html>